<template>
    <div class="head">
        <div class="left">
            <slot name="left">
                <div class="back" @click="goBack">
                    <van-icon name="arrow-left" />返回
                </div>
            </slot>
        </div>
        <div class="mid">
            <slot name="mid"></slot>
        </div>
        <div class="right">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
    router.back() // 返回到上一个路由页面
}
</script>

<style lang="less" scoped>
.head {
    height: 49px;
    padding: 0 17px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 使头部元素垂直居中 */

    .left {
        flex: 1;
        /* 使左边部分占据剩余空间 */
        line-height: 49px;
        font-weight: 600;
        font-size: 16px;
        text-align: left;
    }

    .mid {
        flex: auto;
        line-height: 49px;
        font-weight: 600;
        font-size: 16px;
        text-align: center;
    }

    .right {
        flex: 1;
        /* 使右边部分占据剩余空间 */
        line-height: 49px;
        font-weight: 600;
        font-size: 16px;
        text-align: right;
    }
}
</style>